<template>
   <div class="wrapper">
      <!-- navbar -->
      <MyNavBar></MyNavBar>

      <van-sticky>
         <van-tabs
            line-width="60px"
            line-height="1px"
            title-active-color="#ff5f16"
            color="#ff5f16"
            @click-tab="onClickTab">
            <van-tab title="正在热映"></van-tab>
            <van-tab title="即将上映"></van-tab>
         </van-tabs>
      </van-sticky>

      <!-- href="/film/nowPlaying" -->
      <!-- href="/film/comingSoon" -->
      <!-- <div class="tabs">
         <span
            @click="$router.push('/film/nowPlaying')"
            class="tab"
            >正在热映</span
         >
         <span
            @click="$router.push('/film/comingSoon')"
            class="tab"
            >即将上映</span
         >
      </div> -->

      <RouterView />
   </div>
</template>

<script>
import MyNavBar from "@components/MyNavBar.vue";

export default {
   components: {
      MyNavBar,
   },
   methods: {
      onClickTab({ name }) {
         console.log("onClickTab", name);

         /* 根据序号跳转不同的页面 */
         if (name === 0) {
            this.$router.push("/film/nowPlaying");
         } else {
            this.$router.push("/film/comingSoon");
         }
      },
   },
};
</script>

<style lang="scss" scoped>
.title {
   text-align: center;
   margin: 30px;
}

.wrapper {
   // margin-bottom: 50px;
   .tabs {
      display: flex;
      // border-bottom: 1px solid #eee;
      .tab {
         flex-grow: 1;
         height: 50px;
         line-height: 50px;
         text-align: center;
      }
   }
}
</style>
